<template>
  <div>
    <div class="upload_image_more" v-if="intoType ==4">
      <div class="clearfix">
        <a-upload
          :disabled="disabled"
          name="imageFile"
          accept="image/*"
          :data="paramsData"
          action="/yzm-web-api/image/upload"
          listType="picture-card"
          :fileList="fileList"
          @change="handleMoreChange">
          <a-icon type="plus" />
          <div class="ant-upload-text">Upload</div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </div>
    </div>
    <div class="upload_image" :class="[imageUrl?'position_img':'']" v-else>
      <img class="show_img" :src="imageUrl" alt="" v-if="imageUrl">
      <a-upload-dragger
        :disabled="disabled"
        :class="[imageUrl?'position_upload_img':'']"
        name="imageFile"
        accept="image/*"
        :data="paramsData"
        :multiple="true"
        action="/yzm-web-api/image/upload"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或拖拽上传</p>
      </a-upload-dragger>
    </div>
  </div>
</template>
<script>
import utils from '@/utils/common'
var timeStamp = Number(new Date())
export default {
  props: [ 'imageUrl', 'imageType', 'intoType', 'disabled' ], // intoType = 1应用管理的应用图标，2版权证明，3资质证明，4应用截图
  data () {
    return {
      paramsData: {
        token: utils.AuthToken(timeStamp, this.$store.getters.userKey),
        timestamp: timeStamp,
        adminId: this.$store.getters.adminId,
        imageType: this.imageType
      },
      previewVisible: false, // 多图片上传
      previewImage: '',
      fileList: []
    }
  },
  watch: {
    imageUrl: function (val) {
      if (this.intoType === 4) {
        this.fileList = []
        for (var i in val) {
          if (val[i].uid) {
            this.fileList.push(val[i])
          } else {
            var data = {
              uid: '112' + i,
              name: 'img' + i,
              status: 'done',
              url: val[i].url
            }
            this.fileList.push(data)
          }
        }
      }
    }
  },
  methods: {
    // 单图片上传
    handleChange (info) {
      const status = info.file.status
      if (status !== 'uploading') {
        // console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$message.success('上传成功')
        this.$emit('uploadImage', {
          img: info.file.response.data.imageUrl,
          type: this.intoType
        })
      } else if (status === 'error') {
        this.$message.error('上传失败')
      }
    },
    // 多图片上传
    handleCancel () {
      this.previewVisible = false
    },
    handleMoreChange (file) {
      this.fileList = file.fileList
      if (file.file.status === 'done') {
        for (var f in file.fileList) {
          if (file.fileList[f].uid === file.file.uid) {
            this.fileList.splice(f, 1)
          }
        }
        this.$message.success('上传成功')
        this.fileList.push({
          uid: file.file.uid,
          name: file.file.name,
          status: 'done',
          url: file.file.response.data.imageUrl
        })
        this.$emit('uploadImage', {
          img: this.fileList,
          type: this.intoType
        })
      } else if (status === 'error') {
        this.$message.error('上传失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.show_img{
  max-width: 200px;
  max-height: 150px;
}
.position_img{
  position: relative;
  .position_upload_img{
    position: absolute;
    top: 0;
    left:0 ;
    z-index: 2;
    opacity: 0;
  }
}
.upload_image /deep/ .ant-upload {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: center;
  max-width: 200px;
  height: 150px;
}
</style>
